<template>
  <div>
    <el-container>
      <el-aside width="200px" v-show="isShow">
        <el-card style="height: calc(100% - 20px)">
          <overview-tree @treeDefaultId="getTreeDefaultId"></overview-tree>
        </el-card>
      </el-aside>
      <el-main>
        <isShowTreeBtn @showTree="handleShowTree"></isShowTreeBtn>
        <overview-head :pageData="pageData"></overview-head>
        <overview-center :pageData="pageData"></overview-center>
        <overview-bottom :paramData="paramData"></overview-bottom>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import overviewTree from "../components/tree.vue";
import overviewHead from "./components/head.vue";
import overviewCenter from "./components/center.vue";
import overviewBottom from "./components/bottom.vue";
import isShowTreeBtn from "../components/isShowTreeBtn.vue";
import { getPvData } from "@/api/solarPower/index.js";
export default {
  name: "overview",
  components: {
    overviewTree,
    overviewHead,
    overviewCenter,
    overviewBottom,
    isShowTreeBtn,
  },
  data() {
    return {
      isShow: true,
      // paramData: this.$route.query,
      paramData: this.$store.state.solarPower.terrData,
      // paramData: {},
      pageData: {},
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    // console.log("null1", this.paramData);
    // this.getData();
  },
  watch: {
    "$store.state.solarPower.terrData": {
      handler(val) {
        this.paramData = val;
        console.log("null1Val", this.paramData);
      },
    },
  },
  methods: {
    getTreeDefaultId(val) {
      console.log(val, 22222222);
      this.paramData.id = val;
      console.log("this.paramData", this.paramData);
      this.getData();
    },
    getData() {
      getPvData({ id: this.paramData.id }).then((res) => {
        const resData = res.data;
        const { code, data, msg } = resData;
        if (code == 200) {
          this.pageData = data;
          // console.log("this.pageData", this.pageData);
        } else {
          this.$message.error(msg);
        }
      });
    },
    handleShowTree(val) {
      this.isShow = val;
    },
  },
};
</script>
<style lang="scss" scoped></style>
